import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var xData = [1,2,3,4,5,6,7,8,9,10], yData = [], chart, charts,chart1,chart2, pc=0, mobile=0;
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '温湿度折线图',
      left: 'center'
    },
    color: ["#37A2DA","#FF69B4"],
    // legend: {
    //   data: ['A'],
    //   top: 50,
    //   left: 'center',
    //   backgroundColor: 'red',
    //   z: 100
    // },
    // grid: {
    //   containLabel: true
    // },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一', '二', '三', '四', '五', '六', '日', '一', '二', '三'],
      // x轴的字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      // 控制网格线是否显示
      splitLine: {
        show: true,
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#aaaaaa']
        }
      },
      // x轴的颜色和宽度
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1,   //这里是坐标轴的宽度,可以去掉
        }
      }
      // show: false
    },
    yAxis: [{
      x: 'center',
      type: 'value',
      name:'温度(℃)',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
    },{
      x: 'center',
      type: 'value',
      name:'湿度(%)',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
    }],
    series: [{
      name: '温度',
      type: 'line',
      smooth: true,
      data: []
    },
    {
      name: '湿度',
      type: 'line',
      smooth: true,
      yAxisIndex:1,
      data: []
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChart1(canvas, width, height) {
  chart1 = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart1);
  var option = {
    title: {
      text: '火焰状态折线图',
      left: 'center'
    },
    color: ["#37A2DA","#FF69B4"],
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,6,7,8,9,10],
      // x轴的字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      // 控制网格线是否显示
      splitLine: {
        show: true,
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#aaaaaa']
        }
      },
      // x轴的颜色和宽度
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1,   //这里是坐标轴的宽度,可以去掉
        }
      }
    },
    yAxis: [{
      x: 'center',
      type: 'value',
      name:'火焰状态',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
    }],
    series: [{
      name: '火焰状态',
      type: 'line',
      smooth: true,
      data: []
    }]
  };
  chart1.setOption(option);
  return chart1;
}

function initChart2(canvas, width, height) {
  chart2 = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart2);
  var option = {
    title: {
      text: '光照强度折线图',
      left: 'center'
    },
    color: ["#37A2DA","#FF69B4"],
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,6,7,8,9,10],
      // x轴的字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      // 控制网格线是否显示
      splitLine: {
        show: true,
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#aaaaaa']
        }
      },
      // x轴的颜色和宽度
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1,   //这里是坐标轴的宽度,可以去掉
        }
      }
    },
    yAxis: [{
      x: 'center',
      name:'光照强度(Lux)',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
    }],
    series: [{
      name: '光照强度',
      type: 'line',
      smooth: true,
      data: []
    }]
  };
  chart2.setOption(option);
  return chart2;
}

function initCharts(canvas, width, height) {
  charts = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(charts);
 
  var option = {
    title: {
      text: '今日访问量',
      left: 'center'
    },
    color: ["#37A2DA"],
    // legend: {
    //   data: ['A'],
    //   top: 50,
    //   left: 'center',
    //   backgroundColor: 'red',
    //   z: 100
    // },
    // grid: {
    //   containLabel: true
    // },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一', '二', '三', '四', '五', '六', '日', '一', '二', '三'],
      // x轴的字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000',
          fontSize: '14',
        }
      },
      // 控制网格线是否显示
      splitLine: {
        show: true,
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#aaaaaa']
        }
      },
      // x轴的颜色和宽度
      axisLine: {
        lineStyle: {
          color: '#000',
          width: 1,   //这里是坐标轴的宽度,可以去掉
        }
      }
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },

      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [15, 2, 30, 16, 10, 17, 15, 22, 27, 9]
    }]
  };
 
  charts.setOption(options);
  return charts;
}
Page({
  data: {
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    timer:'',
    ec: {
      onInit: initChart
    },
    ec1: {
      onInit: initChart1
    },
    ec2: {
      onInit: initChart2
    },
    ecs: {
      onInit: initCharts
    }
  },
  onLoad: function (options) {
    var that = this;
    this.setData({                    //每隔一分钟刷新一次
      timer: setInterval(function () {
        that.getDataInfo()
      }, 2000)
  })  
  },
  onUnload(){
    clearInterval(this.data.timer)
  },
  onShow: function () {
    var that = this;
    
  },
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
    this.getDataInfo(e.currentTarget.id);
  },
  getDataInfo() {
    var that = this;
    wx.request({
      url: 'http://39.105.114.119:1616/wenshidu/charts',
      success(res) {
        // var yData = res.data.yData;
        // var xData = res.data.xData;
        let data = res.data.data
        let temp = [] ,hum = []
        for(let i = data.length-1;i>data.length-11;i--){
          temp.push(parseFloat(data[i].temperature))
          hum.push(parseInt(data[i].humidity))
        }
        // console.log(data)
        var option = chart.getOption();
        option.series[0].data = temp;
        option.series[1].data = hum;
        // option.xAxis = {
        //   type: 'category',
        //   boundaryGap: false,
        //   data: [1,2,3,4,5,6,7,8,9,10],
        // };
        chart.setOption(option, true);
        that.setData({
          ip: res.data.ip,
          messall: res.data.messall,
          view: res.data.view
        })   
      },
    })

    wx.request({
      url: 'http://39.105.114.119:1616/fire/charts',
      success(res) {
        // var yData = res.data.yData;
        // var xData = res.data.xData;
        let data = res.data.data
        let tr =[]
        for(let i = data.length-1;i>data.length-11;i--){
          tr.push(parseInt(data[i].data))
        }
        // console.log(data)
        var option = chart1.getOption();
        option.series[0].data = tr;
        // option.xAxis = {
        //   type: 'category',
        //   boundaryGap: false,
        //   data: [1,2,3,4,5,6,7,8,9,10],
        // };
        chart1.setOption(option, true);
        that.setData({
          ip: res.data.ip,
          messall: res.data.messall,
          view: res.data.view
        })   
      },
    })
    /*wx.request({
      url: 'http://119.23.49.165:1616/charts',                    
      success(res) {
        let data = res.data.data
        let gz =[]
        for(let i = data.length-1;i>data.length-11;i--){
          gz.push(parseInt(data[i].data))
        }
        // console.log(data)
        var option = chart2.getOption();
        option.series[0].data = gz;
        chart2.setOption(option, true);
        that.setData({
          ip: res.data.ip,
          messall: res.data.messall,
          view: res.data.view
        })   
      },
    })*/
  }
})